<template>
	<view class="apps">
		<view class="bg">
			<image src="/static/top.png" mode="widthFix"></image>
			<view class="btnview">
				<uv-button :custom-style="customeStyle" @click="getTicket">获取体验券</uv-button>
			</view>
		</view>
		<uv-popup ref="popup" mode="center" :closeable="true" :close-on-click-overlay="false">
			
				
				<view class="popupbg">
					<image :src="ticket.image" mode="widthFix" v-if="ticket.image"></image>
					<view class="tit">截图保存，有备无患</view>
					
				</view>
				
			</view>
		</uv-popup>
	</view>
</template>
<script>
	let app;
	export default {
		data() {
			return {
				customeStyle:{height:'100rpx', width:'720rpx',backgroundColor:'#00409a',borderColor:'#00499a',color:'#fff',fontSize:"32rpx"},
				ticket:{},
				ke:true,
				
			}
		},
		onLoad() {
			
			const ua = window.navigator.userAgent.toLowerCase();
			if (ua.indexOf('micromessenger') === -1 || ua.indexOf('windows') !== -1) {
				this.ke  = false;
				uni.showToast({
					icon:'error',
					title:'需微信扫码',
				})
			}
			app = this;

		},
		methods: {
			getTicket(){
				if(app.ke == false){
					
					uni.showToast({
						icon:'error',
						title:'需微信扫码',
					})
					return ;
				}
				if(!!uni.getStorageSync('xjrhty_370321')){
					uni.showModal({
						title: '你已领取体验券',
						content: '要展示体验券吗？',
						cancelText:'取消',
						confirmText:'展示',
						success: function (res) {
							if (res.confirm) {
								app.request({
									url:'/see',
									data:{secret:uni.getStorageSync('xjrhty_370321')},
									load:true,
									loadTxt:'请稍后',
									success:function(rlt){
										if(rlt.code == 200){
											app.ticket = rlt.data;
											app.$refs.popup.open();
										}else{
											uni.showToast({
												title:rlt.msg,
												icon:'error'
											})
										}
									}
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
					return;
				}
				uni.showModal({
					title: '请输入您的手机号',
					editable:true,
					success: function (res) {
						if (res.confirm) {
							const regex = /^1[3-9]\d{9}$/;
							if(!regex.test(res.content)){
								uni.showToast({
									title:'手机号错误',
									icon:'error'
								});
								return;
							}
							app.request({
								url:'/collected',
								data:{mobile:res.content},
								load:true,
								loadTxt:'领取中',
								success:function(rlt){
									
									if(rlt.code == 200){
										uni.setStorageSync('xjrhty_370321',rlt.data);
										uni.showToast({
											title:'领取成功',
										})
									}else{
										uni.showToast({
											title:rlt.msg,
											icon:'error'
										})
									}
								}
							})
						} else if (res.cancel) {
							uni.showToast({
								title:'欢迎下次使用'
							});
						}
					}
				})
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.bg{display:flex; flex-direction: column; align-items: center; max-width: 100%; min-height: 100vh;background-image: url('/h5/static/bg.jpg'); background-position: top center;background-size: 100%;background-repeat: no-repeat;}
	.bg image{width:720rpx;}
	.bg .btnview{padding-top: 80rpx; width:720rpx;}
	.popupbg{display: flex; flex-direction: column;align-items: center; justify-content: center;  box-sizing:border-box ; width:720rpx;height:921rpx; padding-top: 200rpx;  background-image: url('/h5/static/psg.jpg'); background-position: top center;background-size: 100%;background-repeat: no-repeat;}
	.popupbg image{width:420rpx; margin-bottom: 30rpx;}
	.popupbg .title{display: flex; align-items: center;font-size: 16px;color:#000;padding:20rpx 0;}
</style>
